<template>
  <div class="p-3">
    <el-card>
      <div class="flex">
        <el-button type="primary"  @click="tableRef.getListData()">{{ $t('mess.index.400309-0') }}</el-button>
        <el-button type="primary" plain @click="openUploadTaskDialog">{{ $t('mess.index.400309-1') }}</el-button>
      </div>
    </el-card>
    <el-card class="mt-3">
      <custom-table
        ref="tableRef"
        :prop-list="tableBase"
        select-key="id"
        :req-request="reqRequest"
        :show-index-column="true"
        sequenceWidth="90px"
        :props-search-form="searchForm"
        :cellStyle="cellStyle"
        :operate-flag="true"
        :operate-width="180"
        :disableI-ids="[]"
        :role-config="[]"
        :expend-visible="false"
      >
        <template #status="{ row }">
          <div class="w-full flex justify-center items-center">
            <el-tag v-if="row.status === 'SUCCESS'" type="success">{{ $t('mess.index.400309-2') }}</el-tag>
            <el-tag v-if="row.status === 'FAIL'" type="danger">{{ $t('mess.index.400309-3') }}</el-tag>
            <el-tag v-if="row.status === 'PROCESS'" type="warning">{{ $t('mess.index.400309-4') }}</el-tag>
          </div>
        </template>
        <template #runStatus="{ row }">
          <div class="w-full flex justify-center items-center">
            <el-tag v-if="row.runStatus === 'INIT'" type="primary">{{ $t('mess.index.400309-5') }}</el-tag>
            <el-tag v-if="row.runStatus === 'RUN'" type="success">{{ $t('mess.index.400309-6') }}</el-tag>
            <el-tag v-if="row.runStatus === 'PAUSE'" type="warning">{{ $t('mess.index.400309-7') }}</el-tag>
            <el-tag v-if="row.runStatus === 'END'" type="danger">{{ $t('mess.index.400309-8') }}</el-tag>
          </div>
        </template>
        <template #operate="{ row }">
          <div class="flex justify-center gap-3">
<!--            router.push({ path: '/mess/messInfo/index', query: { id: row.id, status: row.status, userName: userStore.userName } })-->
            <el-link :underline="false" type="primary" @click="jumpDetail(row)">{{ $t('mess.index.400309-9') }}</el-link>
            <el-link v-if="row.status === 'SUCCESS' && row.runStatus === 'INIT'" type="primary" :underline="false" @click="processTask(row)">{{ $t('mess.index.400309-10') }}</el-link>
            <el-link v-if="row.runStatus === 'INIT'"  type="danger" :underline="false" @click="failTask(row)">{{ $t('mess.index.400309-11') }}</el-link>
          </div>
        </template>
      </custom-table>
    </el-card>
    <el-dialog
      width="625px"
      :title="$t('mess.index.400309-1')"
      v-model="dialogConfig.visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="!dialogConfig.loading"
      destroy-on-close
    >
      <custom-form
        ref="dialogFormRef"
        label-position="left"
        :layout-vertical="true"
        :form-items="dialogBaseConfig"
        :item-style="itemStyle"
        :model-value="dialogConfig.data"
        right-width="auto"
        @update="row => (dialogConfig.data = row)"
      >
        <template #remark>
          <div class="text-sm text-[rgba(255,_87,_51,_1)]">
            <p>{{ $t('mess.index.400309-12') }}</p>
            <p>{{ $t('mess.index.400309-13') }}</p>
          </div>
        </template>
        <template #footer>
          <div class="flex justify-end items-center">
            <el-button type="warning" :loading="dialogConfig.loading" @click="dialogConfig.visible = false">{{ $t('mess.index.400309-14') }}</el-button>
            <el-button type="primary" :loading="dialogConfig.loading" @click="submitTask">{{ $t('mess.index.400309-15') }}</el-button>
          </div>
        </template>
      </custom-form>
    </el-dialog>
  </div>
</template>

<script setup>
import customForm from '@/components/customForm'
import customTable from '@/components/customTable'
import {itemStyle, searchBaseConfig, cellStyle, tableBase, dialogBaseConfig} from "./config.js";
// import router from '@/router/index.js'
import {removeTaskApi, useTaskApi} from "@/api/message/mess.js";
import {uploadFile} from "@/utils/request.js";
import {defaultTo} from "@/utils/setting.js";
import useI18n from '@/i18n'
import useSocketStore from "@/store/modules/socket.js";

const SocketStore = useSocketStore()
const { t, locale } = useI18n.global
// const userStore = useUserStore()
const reqRequest = {
  url: '/tsk/task/userPackTaskList',
  methods: 'get'
}

const searchForm = ref({}) // 搜索条件
const route = inject('route')

const tableRef = ref() // 表格实例对象
const dialogFormRef = ref() // 提交表单实例对象
const dialogConfig = ref({
  visible: false,
  data: {},
  loading: false
})

// 立即发送
const processTask = (data) => {
  ElMessageBox.confirm(t('mess.index.400309-16'), t('mess.index.400309-17'), {
    confirmButtonText: t('mess.index.400309-15'),
    cancelButtonText: t('mess.index.400309-14'),
    type: 'warning'
  }).then(() => {
    useTaskApi(data.id).then(res => {
      ElMessage.success(t('mess.index.400309-18'))
      tableRef.value.getListData()
    })
  })
}

// 删除该群发
const failTask = (data) => {
  ElMessageBox.confirm(t('mess.index.400309-19'), t('mess.index.400309-17'), {
    confirmButtonText: t('mess.index.400309-15'),
    cancelButtonText: t('mess.index.400309-14'),
    type: 'warning'
  }).then(() => {
    removeTaskApi(data.id).then(res => {
      ElMessage.success(t('mess.index.400309-20'))
      tableRef.value.getListData()
    })
  })
}

// 打开上传弹框
const openUploadTaskDialog = () => {
  dialogConfig.value.data = {}
  dialogConfig.value.visible = true
}

//  提交上传
const submitTask = async () => {
  const flag = await dialogFormRef.value.haveValidate()
  if (flag && !dialogConfig.value.loading) {
    const { keyFile, valueFile, tskTaskName } = dialogConfig.value.data
    const params = {
      keyFile: keyFile[0],
      valueFile: valueFile[0],
      tskTaskName: tskTaskName
    }
    const tipRef = ElMessage({
      type: 'warning',
      message: t('mess.index.400309-21'),
      duration: 500000
    })
    dialogConfig.value.loading = true
    uploadFile(params, '/tsk/task/submitTask').then(res => {
      tableRef.value.getListData()
      dialogConfig.value.visible = false
      ElMessage.success(t('mess.index.400309-22'))
    }).catch().finally(() => {
      dialogConfig.value.loading = false
      tipRef.close()
    })
  }
}

// 跳转详情页
const jumpDetail = (data) => {
  let { id, status } = data // userName
  route.value = {
    path: '/mess/messInfo',
    meta: { title: 'src.App.054912-1' },
    params: { id, status }
  }
}
</script>

<style scoped lang="scss">

</style>